<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单标签form
         action 表单提交到服务器地址
    -->
    <form action="test.php"></form>
    <!-- 明文输入框 -->
     用户：<input type="text">
     <!-- 暗文输入框 -->
     密码：<input type="password"><br>
     <!-- 单选按钮  出现互斥效果需要加到同一个选项组-->
      性别：
      男：<input type="radio" name="gender" value="male">
      女：<input type="radio" name="gender" value="female"><br>
      <!-- 复选框 -->
       爱好：
       篮球：<input type="checkbox" name="hobbies" value="basketball">
       足球：<input type="checkbox" name="hobbies" value="football">
       游泳：<input type="checkbox" name="hobbies" value="swimming">
       <!-- hr 分割线 -->
        <hr>
        <!-- 下拉框 -->
         <select name="city">
            <!-- 对下拉选项进行分组 -->
            <optgroup label="一线城市">
            <option value="taiyuan">太原</option>
            <option value="datong">大同</option>
            <option value="jinzhong">晋中</option>
            </optgroup>

            <optgroup label="二线城市">
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>
            </optgroup>
         </select>
         <!-- 多行文本框 cols表示100列  rows表示100行-->
          <textarea cols="30" rows="10"></textarea>
          <!-- 日期选择器 -->
           <input type="date">
          <!-- 时间日期选择器 -->
           <input type="datetime-local">
</body>
</html>